<template>
	    <view class="tabs">
	      <view class="line" :style="{left: slideLeft}"></view>
	      <view v-for="(item, index) in tabList" :key="index" class="tab" :class="{'tab-current':  index == currentIndex}" @click="clickTab(index)">{{item}}</view>
	    </view>

</template>

<script>
export default {
  name: '',
  data () {
    return {
      tabList: ['告警记录', '人脸抓拍', '车辆抓拍'],
      tabLen: '',
      currentIndex: 0,
      slideLeft: ''
    }
  },
  props:{
	  tempIndex:{
		  type:Number,
		  default:0
	  }
  },
  watch:{
	  tempIndex(newValue,oldValue){
		  console.log(newValue,oldValue);
		this.clickTab(newValue);
		// this.currentIndex = newValue;
		//  const left = 100 / this.tabLen / 2
		//  // 一次滑动二分一tab标签值
		//  // 三个标签，可以看成把屏幕分成了6份，每人占2份
		//  // 第一个下划线，从第1份的地方开始，是0*2+1
		//  // 第二个下划线，从第3份的地方开始，是1*2+1
		//  // 第三个下划线，从第5份的地方开始, 是2*2+1
		//  console.log(left);
		//  this.slideLeft = left * (newValue * 2 + 1) + '%';
		//   console.log(this.slideLeft);
		  
	  }
  },
  methods: {
    // 点击时的下划线跟随效果
    clickTab (index) {
      this.currentIndex = index
      // 算出一个tab所占屏幕的宽度，除以2是为了让下划线待在tab标签宽度二分之一处，因为css中给line标签样式使用了绝对定位，并且设置了margin负值，所以这个位置可以让line正好在tab标签下面居中
      const left = 100 / this.tabLen / 2
      // 一次滑动二分一tab标签值
      // 三个标签，可以看成把屏幕分成了6份，每人占2份
      // 第一个下划线，从第1份的地方开始，是0*2+1
      // 第二个下划线，从第3份的地方开始，是1*2+1
      // 第三个下划线，从第5份的地方开始, 是2*2+1
      this.slideLeft = left * (index * 2 + 1) + '%';
	  this.$emit('setType',index);
    },
    // 刚进入页面没有点击时的下划线设置
    slideLineLeft () {
      this.tabLen = this.tabList.length
      const left = 100 / this.tabLen / 2
      this.slideLeft = left * (this.currentIndex * 2 + 1) + '%'
    }
  },
  mounted () {
    this.slideLineLeft()
    // 如果不写这个函数，页面刚加载时默认tab的下划线位置是不对的
  }
}
</script>


<style scoped lang="scss">
	.tabs{
		display: flex;
		 justify-content: space-around;
		 text-align: center;
		 position: relative;
		 margin: 13px;
		 .line{
			 position: absolute;
			   bottom: -6px;
			   width: 14px;
			   height: 4px;
			   border-radius: 5px;
			   margin-left: -7px;
			   transition: all 0.3s;
			   background: #0065D8;
			
		 }
		.tab{
			color: #666666;
			font-size: 14px;
		
			  // line-height: .88rem;
			
			  &.tab-current{
				  font-weight: 700;
				    color: #1c253a;
			  }
		}
	}
	
</style>